<template>
	<!-- 注册 -->
	<div id="app">
		<div class="background">
			<img :src="imgSrc" width="100%" height="100%" alt="" />
		</div>

		<div class="front">
			<router-link type="info" to="/register">首页</router-link>
			<el-card class="box-card1">
				<div class="flexx">
					<div class="flexx-from">
						<h2>欢迎注册软特来福账号</h2>
						<div class="flexx-from1">
							<el-form ref="form" :model="form" label-width="80px">
								<el-form-item prop="username" label="用户名称" :rules="[{ required: true, message: '请输入用户名称', trigger: 'blur' }]">
									<el-col :span="25">
										<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入姓名"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item prop="email" label="邮箱" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
							{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
									<el-col :span="25">
										<el-input v-model="form.email" prefix-icon="el-icon-message" placeholder="输入邮箱地址"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item prop="password" label="输入密码" :rules="[{ required: true, message: '请输入用户密码', trigger: 'blur' }]">
									<el-col :span="25">
										<el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="输入您的密码"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item prop="password" label="确认密码" :rules="[{ required: true, message: '请输入用户密码', trigger: 'blur' }]">
									<el-col :span="25">
										<el-input type="password" v-model="form.repassword" prefix-icon="el-icon-lock" placeholder="再次输入您的密码"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmit">立即注册</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
				<div class="link1">
					<router-link type="primary" to="/">立即登录</router-link>已有账号？
				</div>
			</el-card>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (this.ruleForm.repassword !== "") {
						this.$refs.ruleForm.validateField("repassword");
					}
					callback();
				}
			};
			const validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.info.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			};

			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					password: '',
					repassword: '',
					type: []
				},

				info: {},
				rules: {
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{
							validator: validatePass,
							trigger: "blur"
						},
					],
					repassword: [{
							required: true,
							message: "请确认密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{
							validator: validatePass2,
							trigger: "blur",
							required: true
						},
					],
				},
				imgSrc: "https://img-blog.csdnimg.cn/20210315195750345.gif"


			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			}
		},
		beforeRouteUpdate(to, from, next) {
			// 做一些想要做的处理...
			// this.errCode = to.params.code
			// this.info = formatErrorMsg(this.errCode)
			next() // 一定要有next
		}
	}
</script>

<style>
	.background {
		width: 100%;
		height: 100%;
		/**宽高100%是为了图片铺满屏幕 */
		z-index: -1;
		position: absolute;
	}

	.front {
		z-index: 1;
		position: absolute;
	}

	.flexx {
		border-radius: 4px;
		display: flex;
		flex-direction: row;
		margin-top: 5px;
		margin-left: 5px;
		color: black;

	}

	.flexx-from {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.flexx-from1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-card1 {
		margin: auto;
		width: 318px;
		height: 450px;
		margin-top: 20%;
		margin-left: 35%;
		padding: 6px;

	}

	.link1 {
		display: flex;
		flex-direction: row-reverse;
	}
</style>
